<template>
     <div class="box">
      <div class="header">
        <van-search
          v-model="value"
          placeholder="OPPO A3"
          style="width: 100px"
        />
        <h4>登录</h4>
      </div>
      <div class="content">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" style="width:100%;height:200px;"/>
          </van-swipe-item>
        </van-swipe>

        <van-grid>
  <van-grid-item :icon="require('../../img/1.jpg')" text="手机" />
  <van-grid-item  :icon="require('../../img/2.jpg')" text="平板" />
  <van-grid-item :icon="require('../../img/1.jpg')" text="手机" />
  <van-grid-item  :icon="require('../../img/2.jpg')" text="平板" />
</van-grid>
   <div class="content2">
      <img src="../../img/3.jpg" alt="">
      <ul>
         <li>配置一个键200元</li>
         <li>|</li>
         <li>享受时刻</li>
         <li>|</li>
         <li>享受时刻美美哒</li>
      </ul>
   </div>

   <div class="content3">
     <h3>手机专区</h3>
     <img src="../../img/4.jpg" alt="">
   </div>
    
      </div>
    </div>
</template>

<script setup>

const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];
</script>
